<template>
	<satri-page :padding="20">
		<satri-card label="基础用法">
			<satri-row>
				<satri-col :span="4">
					<satri-loading></satri-loading>
				</satri-col>
			</satri-row>
		</satri-card>

		<satri-card label="不同大小">
			<satri-row>
				<satri-col :span="4">
					<satri-loading :size="40"></satri-loading>
				</satri-col>

				<satri-col :span="4">
					<satri-loading :size="50"></satri-loading>
				</satri-col>

				<satri-col :span="4">
					<satri-loading :size="60"></satri-loading>
				</satri-col>
			</satri-row>
		</satri-card>

		<satri-card label="主题">
			<satri-row>
				<satri-col :span="4">
					<satri-loading></satri-loading>
				</satri-col>

				<satri-col :span="4">
					<satri-loading theme="snow"></satri-loading>
				</satri-col>

				<satri-col :span="4">
					<satri-loading theme="dot"></satri-loading>
				</satri-col>
			</satri-row>
		</satri-card>

		<satri-card label="加载区域">
			<satri-loading-mask loading>
				<view class="space">
					<satri-form>
						<satri-form-item label="昵称">
							<satri-input />
						</satri-form-item>

						<satri-form-item label="性别">
							<satri-select />
						</satri-form-item>
					</satri-form>
				</view>
			</satri-loading-mask>
		</satri-card>
	</satri-page>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.space {
	font-size: 28rpx;
	background-color: #f6f7fa;
	position: relative;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 16rpx;
}
</style>
